<#include "/include/table/properties.ftl">
<template>
    <el-drawer :model-value="visible" :title="title" @close="closeDrawer" size="600px">
        <el-form label-position="left" class="detail-form" label-width="120px">
            <detail-form-items :detail="detail" :properties="properties" label-width="120px" />
        </el-form>
        <div class="dialog-footer">
            <el-button @click="closeDrawer" icon="el-icon-close">关闭</el-button>
            <el-button @click="edit" type="primary" icon="el-icon-edit">编辑</el-button>
            <el-button @click="del" type="danger" icon="el-icon-delete">删除</el-button>
        </div>
    </el-drawer>
</template>

<script lang="ts">
import { defineComponent, inject, reactive, ref, toRefs, watch } from 'vue'
import DetailFormItems from '@/components/DetailFormItems.vue'
import { request } from '@/utils/request-utils'
import { copyProperties } from '@/utils/object-utils'

const properties = [
    <#list table.columns as column>
    <#include "/include/column/properties.ftl">
    <#if (isContent || column.validStatus)>
    <#else>
    { label: '${columnComment}', name: '${fieldName}' },
    </#if>
    </#list>
]
<#list table.selectColumns as column>
<#include "/include/column/properties.ftl">

const ${fieldNameExceptKey}SelectList = [
    <#list column.selectOptions as option>
    { <#if (isInteger)>value: ${option.value}, text: '${option.text}'<#else>value: '${option.value}', text: '${option.text}'</#if> }<#if option?has_next>, </#if>
    </#list>
]
</#list>

export default defineComponent({
    components: { DetailFormItems },
    emits: ['edit', 'del'],
    props: {
        pk: {
            type: [Object, Map],
            required: false,
            default: () => undefined
        },
        visible: {
            type: Boolean,
            default: () => false
        },
        <#list table.fkSelectColumns as column>
        <#include "/include/column/properties.ftl">
        ${fieldNameExceptKey}SelectList: {
            type: Array,
            default: () => []
        }
        </#list>
    },
    setup(props, { emit }) {
        const { pk, visible } = toRefs(props)
        const title = ref<string>('')
        const detail = reactive<any>({})
        const closeDetailDrawer = inject<(newVal: boolean) => void>('closeDetailDrawer')
        const closeDrawer = () => {
            if (closeDetailDrawer) closeDetailDrawer(false)
        }

        const getDetail = (newVal: boolean) => {
            if (!newVal) return
            title.value = '${tableComment}详情'

            request({ url: '/${tablePath}/detail', method: 'GET', params: pk.value }).then(response => {
                copyProperties(response, detail)
            })
        }

        watch(visible, getDetail)

        return {
            properties,
            <#list table.selectColumns as column>
            <#include "/include/column/properties.ftl">
            ${fieldNameExceptKey}SelectList,
            </#list>
            title, detail,
            edit: () => {
                closeDrawer()
                emit("edit", detail)
            },
            del: () => emit("del"),
            closeDrawer
        }
    }
})
</script>

<style scoped>
</style>